<template>
    <div>门店信息 - 添加</div>
    <table class="table">
        <tbody>
            <tr>
                <td style="width:120px">
                    门店名称<span class="start">*</span>
                </td>
                <td>
                    <input type="text" v-model="form.hotelName" class="form-control">
                </td>
            </tr>
            <tr>
                <td>
                    分店名称
                </td>
                <td>
                    <input type="text" v-model="form.subName" class="form-control">
                </td>
            </tr>
            <tr>
                <td>
                    商户地址<span class="start">*</span>
                </td>
                <td>
                    <select v-model="form.pId" class="form-control">
                        <option :value="0">请选择</option>
                        <option v-for="item in proviceList" :key="item.pId" :value="item.pId">{{ item.pName }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    门店照片<span class="start">*</span>
                </td>
                <td>
                    <!-- 显示上传后的图片 -->
                    <img :src="form.pic" style="max-width: 120px;max-height: 120px;">
                    <!-- 上传控件 -->
                    <input type="file" style="display: '';" id="file" @change="uploadPic">
                    <!-- 点击后开始上传 -->
                    <!-- <button class="btn btn-warning" @click="upload">上传</button> -->
                </td>
            </tr>
            <tr>
                <td>客服电话<span class="start">*</span></td>
                <td>
                    <input type="text" v-model="form.phone" class="form-control">
                </td>
            </tr>
            <tr>
                <td>门店状态</td>
                <td>
                    <label class="radio-inline">
                        <input type="radio" :value="true" v-model="form.state"> 启用
                    </label>
                    <label class="radio-inline">
                        <input type="radio" :value="false" v-model="form.state"> 停用
                    </label>
                </td>
            </tr>
            <tr>
                <td>开业日期<span class="start">*</span></td>
                <td>
                    <input type="date" class="form-control" v-model="form.createTime">
                </td>
            </tr>

            <tr>
                <td>门店介绍</td>
                <td>
                    <textarea v-model="form.desc" class="form-control" rows="5"></textarea>
                </td>
            </tr>
            <tr>
                <td>入住须知</td>
                <td>
                    <textarea v-model="form.remark" class="form-control" rows="5"></textarea>
                </td>
            </tr>
            <tr>
                <td>交通信息</td>
                <td>
                    <textarea v-model="form.traffic" class="form-control" rows="5"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button class="btn btn-success" @click="save">添加</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
// 引入组件
import { ref, reactive, onMounted } from "vue"
import axios from "axios"

import "bootstrap/dist/css/bootstrap.min.css"
import { useRouter } from "vue-router"


// 变量
// 系统路由
const router = useRouter();
// 门店信息
const form = reactive({
    hotelName: "",
    subName: "",
    pId: 0,
    pic: "",
    phone: "",
    state: true,
    createTime: "",
    desc: "",
    remark: "",
    traffic: ""
})
// 门店地址列表
const proviceList = ref([])

// 方法

// 添加
const save = () => {
    // 非空判定
    if (!form.hotelName) {
        alert("门店名称不能为空！")
        return;
    }
    if (form.pId < 1) {
        alert("请选择商户地址")
        return;
    }
    if (!form.pic) {
        alert("请上传门店照片")
        return;
    }
    if (!form.phone) {
        alert("客服电话不能为空！")
        return;
    }
    if (!form.createTime) {
        alert("开业日期必须选择！")
        return;
    }

    axios.post("http://localhost:1338/api/Hotel/HotelAdd", form).then(res => {
        // 重名判定
        if (res.data == -1) {
            alert("门店名称重复！")
            return;
        }
        if (res.data > 0) {
            alert("添加成功！");
            // 跳转到列表页
            router.push("/hotelList")
        } else {
            alert("添加失败！")
        }
    })
}

// 点击后，开始上传
const upload = () => {
    document.getElementById("file")?.click();
}

// 上传图片
const uploadPic = (e: any) => {
    // 上传的文件
    let file = e.target.files[0];
    console.log(file);
    // 图片格式判定（.jpg，.png，.gif）
    let picExt = ["image/jpeg", "image/png", "image/gif"]
    if (picExt.indexOf(file.type) == -1) {
        alert("图片格式错误！必须是以下格式【.jpg，.png，.gif】")
        return;
    }

    // 文件大小 判定
    if (file.size > 2 * 1024 * 1024) {
        alert("文件大小不能超过2M")
        return;
    }
    // 表单
    const formData = new FormData();
    // 追加值
    formData.append("file", file);

    // 上传
    axios.post("http://localhost:1338/api/Hotel/UploadPic", formData).then(res => {
        form.pic = res.data;
    }).catch(err => {
        console.log(err);
    })
}

// 获取门店地址列表
const getProvinceList = () => {
    axios.get("http://localhost:1338/api/Hotel/GetProvinceList").then(res => {
        proviceList.value = res.data;
    }).catch(err => {
        console.log(err);
    })
}

// 勾子函数
onMounted(() => {
    getProvinceList();
})

</script>

<style>
.start {
    color: red;
    padding-left: 5px;
    font-weight: bold;
    vertical-align: middle;
}
</style>